Introduction:
In this article we are going give an example of alert message box or how to use confirm message box using jQuery with example.
Description:
The alert.js use to show mobile-friendly popup boxes.
alert.js is a lightweight jQuery/Zepto plugin used to create cross-browser, mobile-friendly popup boxes that meet all your needs about confirm/alert dialogs and toast-style notifications.
Let’s see an example of alert.js:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery alert.js Demos</title>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="alert.min.js"></script>
<style>
p {
font-size: 14px;
line-height: 16px;
color: #777;
}
body {
background-color: #F7F7F7;
font-family: 'Roboto';
}
.hide {
visibility: hidden;
height: 0;
width: 0;
}
code {
overflow: auto !important;
}
pre {
padding: 1px !important;
width: 100%;
}
.btn {
border: 1px solid #ccc;
color: #666;
display: inline-block;
padding: 3px 6px;
cursor: pointer;
font-size: 14px;
}
.btn:hover {
border-color: #aaa;
color: #333;
}
.new:before {
content: 'New';
color: red;
text-shadow: 0 0 5px yellow;
font-weight: bold;
padding: 0 5px;
}
.container {
margin-top: 70px;
}
</style>
</head>
<body>
<div class="btn" onclick="alert()">Alert Dialog</div>
<div class="btn" onclick="confirm()">Confirm Dialog</div>
<div class="btn new" onclick="confirmNew()">Close When Click On Cancel Button.</div>
<div class="btn new" onclick="ToastMessage()">Toast Message</div>
<script>
var alert = function () {
$.alert('This is an alert message', function (a) { $.alert('You clicked confirm') })
}
var confirm = function () {
$.confirm('This is a confirmation message',
function (a) {
$.alert('You just clicked' + (a ? 'Okey' : 'Cancel')
)
})
};
var confirmNew = function () {
$.confirm('The dialog CANNOT be closed.', function (e) {
if (!e) return;
this.find('.alert_content').html('The dialog CANNOT be closed untile you click CANCEL button.');
return false;
})
}
var ToastMessage = function ()
{
var showdef = Math.random() > 0.5;
$.tips(showdef ? 'Auto close after 2 seconds if no duration is specified.'
: 'This is a toast message that auto hides after 5 seconds',
showdef ? 50000 : 50000)
}
</script>
</body>
</html>
Output:
I hope this article will help to you after reading.
Leave Comment